<template>
	<view class="address-container">
		<z-paging ref="pagingRef" :show-refresher-when-reload="true" :show-scrollbar="false" v-model="addressData" @query="doGetAddress">
			<template #top>
				<!-- 固定头部 -->
				<view class="fixed-header">
					<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>
					<tn-navbar 
						home-icon="" 
						:bottom-shadow="false" 
						bg-color="tn-type-primary_bg"
						text-color="tn-white"
					>
						选择地址
					</tn-navbar>
				</view>
			</template>

			<!-- 地址列表内容 -->
			<view class="address-content-wrapper">
				<view class="empty-state" v-if="addressData.length === 0">
					<tn-icon name="location" size="80" color="#cbd5e0"/>
					<text class="empty-text">暂无收货地址</text>
				</view>
				
				<view 
					class="address-card" 
					v-for="(item,index) in addressData" 
					:key="index"
					@click="selAddress(item)"
				>
					<view class="address-content">
						<view class="contact-info">
							<text class="contact-name">{{item.recemanname}}</text>
							<text class="contact-phone">{{item.recetelephone}}</text>
						</view>
						<view class="address-detail">
							{{item.address}}
						</view>
					</view>
					<view class="select-icon">
						<tn-icon name="right" size="24" color="#999"/>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import { postCall  } from '@/api/index.js'
	import { createParams } from '@/utils/utils.js'
	import { EventBus } from '@/mitt/EventBus.js';
	const headerClass = ref('');
	const shopClientInfo = reactive({});
	const pagingRef = ref(null);
	
	onMounted(() => {
		Object.assign(shopClientInfo,uni.getStorageSync("SHOPCLIENTINFO"));
		doGetAddress();
	});
	
	let back = (val) =>{
		EventBus.emit('shopClientInfo',val);
		uni.navigateBack();
	}
	const searchValue = ref("");
	const searchInputEvent = () =>{
		
	}
	const searchBtnClickEvent = () =>{
		
	}
	const procName = "PROC_APP_DO_SHOPPING";
	const addressData = ref([]);
	let doGetAddress = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "ADDRESS";		
		params["P_CLIENTID"] = shopClientInfo.businessid;	
		postCall(params).then(res=>{
			if(res){
				if(res.code===200 || res.code ===1000){
					pagingRef.value.complete(res.data.DATASET);
						// res.data.DATASET.forEach(item => {
						//   addressData.push(item);
						// });
				}
			}
			
		})
	}
	
	let selAddress = (val) =>{
		uni.setStorageSync("SHOPCLIENTINFO",Object.assign(uni.getStorageSync("SHOPCLIENTINFO"),val));
		back(val);
	}
	
</script>

<style scoped>
/* 简洁设计风格 */
.address-container {
	min-height: 100vh;
	background: linear-gradient(to bottom, #f8f9ff 0%, #f0f2f9 100%);
}

/* 头部样式 */
.fixed-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--tn-color-primary);
	box-shadow: 0 4rpx 20rpx rgba(var(--tn-color-primary-rgb), 0.15);
}

/* 地址内容容器 */
.address-content-wrapper {
	padding: 12rpx;
	padding-bottom: 40rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24rpx;
	padding: 120rpx 0;
	opacity: 0.6;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	font-weight: 400;
}

/* 地址卡片样式 */
.address-card {
	background: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
	box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: all 0.3s ease;
	position: relative;
	display: flex;
	align-items: center;
	padding: 16rpx;
}

.address-card:active {
	transform: translateY(2rpx);
	box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.06);
	background: #f8f9fa;
}

/* 地址内容区域 */
.address-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

/* 联系人信息 */
.contact-info {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.contact-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}

.contact-phone {
	font-size: 24rpx;
	color: #666;
	font-weight: 400;
}

/* 地址详情 */
.address-detail {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 选择图标 */
.select-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48rpx;
	height: 48rpx;
	flex-shrink: 0;
}

/* 响应式设计 */
@media screen and (max-width: 768rpx) {
	.address-content-wrapper {
		padding: 8rpx;
	}
	
	.address-card {
		margin-bottom: 8rpx;
		padding: 12rpx;
	}
	
	.contact-info {
		gap: 16rpx;
	}
	
	.contact-name {
		font-size: 26rpx;
	}
	
	.contact-phone {
		font-size: 22rpx;
	}
	
	.address-detail {
		font-size: 22rpx;
	}
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
	.address-container {
		background: linear-gradient(to bottom, #1a1a2e 0%, #16213e 100%);
	}
	
	.address-content-wrapper {
		background-color: #1a1a2e;
	}
	
	.address-card {
		background: #2a2a3e;
		border: 1rpx solid #333;
	}
	
	.address-card:active {
		background: #333;
	}
	
	.contact-name {
		color: #ffffff;
	}
	
	.contact-phone,
	.address-detail {
		color: #ccc;
	}
}

/* H5特定样式 */
/* #ifdef H5 */
.address-content-wrapper {
	padding-bottom: 24rpx;
}
/* #endif */
</style>